<script>
import { defineComponent, reactive, toRefs, onMounted, watch, ref } from "vue";
import { editRecordingPlan } from "@/api/configure.js";
import timeSelect from "./timeSelect.vue";
import { getConfigList, reStartRegular } from "@/api/configure.js";

export default defineComponent({
  name: "VideoSetting",
  components: {
    timeSelect,
  },
  setup(props) {
    const state = reactive({
      current: -1,
      videoForm: {
        preRecordingTime: 0,
        recordingDelay: 0,
        timedRecording: 0,
        loopWrite: 0,
        recordingPeriod: [
          {
            week: 1,
            timeList: [],
          },
          {
            week: 2,
            timeList: [],
          },
          {
            week: 3,
            timeList: [],
          },
          {
            week: 4,
            timeList: [],
          },
          {
            week: 5,
            timeList: [],
          },
          {
            week: 6,
            timeList: [],
          },
          {
            week: 7,
            timeList: [],
          },
        ],
      },
      taskSet: 0,
      marks: {
        0: "0",
        2: "2",
        4: "4",
        6: "6",
        8: "8",
        10: "10",
        12: "12",
        14: "14",
        16: "16",
        18: "18",
        20: "20",
        22: "22",
        24: "24",
      },
      options: [
        {
          value: 0,
          label: "关闭",
        },
        {
          value: 1,
          label: "开启",
        },
      ],
      isshowCopy: false,
      checkList: [],
      formRules: {
        preRecordingTime: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
          {
            type: "number",
            min: 0,
            max: 60,
            message: "请在0--60之间输入",
            trigger: "blur",
          },
        ],
        recordingDelay: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
          {
            type: "number",
            min: 0,
            max: 6000,
            message: "请在0--6000之间输入",
            trigger: "blur",
          },
        ],
      },
    });

    const elForm = ref(null);

    //点击保存
    const saveVideo = () => {
      elForm.value.validate((valid) => {
        if (valid) {
          editRecordingPlan(state.videoForm).then(
            (info) => {
              if (info.code === 200) {
                ElMessage({
                  message: "保存成功",
                  type: "success",
                  offset: 400,
                });
                reStartRegular().then((res) => {});
              } else {
                ElMessage({
                  message: info.message,
                  type: "warning",
                });
              }
            },
            (err) => {
              ElMessage({
                message: err.message,
                type: "warning",
              });
            }
          );
        } else {
          return false;
        }
      });
    };

    onMounted(() => {
      getConfig();
    });

    //获取配置列表
    const getConfig = () => {
      getConfigList(0).then(
        (info) => {
          if (info.code === 200) {
            // state.tableForm = info.data.configStorageStorageManagement;
            state.videoForm = info.data.configStorageRecordingPlan;

            // state.screenShot = info.data.configStorageScreenshot;
          } else {
            ElMessage({
              message: info.message,
              type: "warning",
            });
          }
        },
        (err) => {
          ElMessage({
            message: err.message,
            type: "warning",
          });
        }
      );
    };

    const changeTime = (time) => {
      state.videoForm.recordingPeriod = time;
    };

    return {
      ...toRefs(state),
      getConfig,
      saveVideo,
      changeTime,
      elForm,
    };
  },
});
</script>

<template>
  <div class="videoSetContainer">
    <div class="top">
      <el-checkbox
        :true-value="1"
        :false-value="0"
        v-model="videoForm.timedRecording"
        label="启用定时任务"
        size="large"
      />
    </div>
    <!-- <div class="tasktime">
      目标跟踪
      <el-select v-model="taskSet" placeholder="请选择" style="width: 180px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div> -->
    <div class="centerContainer">
      <div class="videoMain">
        <time-select
          :timedata="videoForm.recordingPeriod"
          @changeTime="changeTime"
        ></time-select>
      </div>

      <div class="bar">
        <div class="show">
          <div>
            <span class="colorB"></span>
            定时
          </div>
        </div>
      </div>
    </div>

    <div class="bottomContainer">
      <div>
        <el-checkbox
          :true-value="1"
          :false-value="0"
          v-model="videoForm.loopWrite"
          label="循环写入"
          size="large"
        />
      </div>
      <el-form
        :model="videoForm"
        :rules="formRules"
        class="elForm"
        ref="elForm"
        label-width="auto"
      >
        <el-form-item label="预录时间" prop="preRecordingTime">
          <el-input
            style="width: 120px"
            v-model.number="videoForm.preRecordingTime"
          />秒
        </el-form-item>
        <el-form-item label="录像延时" prop="recordingDelay">
          <el-input
            style="width: 120px"
            v-model.number="videoForm.recordingDelay"
          />秒
        </el-form-item>
      </el-form>
    </div>

    <save-button @click="saveVideo" />
  </div>
</template>

<style lang="scss">
.videoSetContainer {
  width: 100%;

  .top {
    height: 40px;
  }

  .tasktime {
    margin-bottom: 20px;
  }

  .centerContainer {
    height: 400px;
    .videoMain {
      width: 720px;
      height: 400px;
      float: left;
      background-color: #f2f2f2;
      padding: 19px 0 13px 13px;

      .slider-demo-block {
        max-width: 600px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .slider-demo-block .el-slider {
        margin-top: 0;
        margin-left: 12px;
      }
      .slider-demo-block .demonstration {
        font-size: 20px;
        color: var(--el-text-color-secondary);
        line-height: 44px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 0;
        margin-left: 20px;
      }
      .slider-demo-block .demonstration + .el-slider {
        flex: 0 0 70%;
      }
    }
    .bar {
      float: left;
      margin-left: 20px;
      .show div {
        margin-top: 10px;
      }
      .colorB {
        display: inline-block;
        height: 20px;
        width: 20px;
        background-color: #1890ff;
      }

      .colorG {
        display: inline-block;
        height: 20px;
        width: 20px;
        background-color: #39b54a;
      }

      .copy {
        margin-top: 300px;
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-image: url("@/assets/components/document.png");
        background-size: cover;
      }
    }
  }

  .bottomContainer {
    // margin-top: 10px;

    .center {
      margin: 15px 0;
    }
  }
}
</style>
